<!DOCTYPE html>
<html height100 xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="authority/common/currency/head"></div>
    <style type="text/css">
        h1, h2, h3 {
            padding: 10px 0;
        }

        /*a {*/
        /*text-align: right;*/
        /*font-size: 18px;*/
        /*color: #1C86EE;*/
        /*}*/

        .tree_contianer {
            width: 100%;
            height: 100%;
            color: #0C0C0C;
            /*border: 1px solid #9C9C9C;*/
            overflow: auto;
            padding: 5px 0 25px 0;
            margin-bottom: 10px;
            /*background-color: #fff;*/
        }

        .icon-hide {
            display: none;
        }

        .nav-tree-div {
            white-space: nowrap;
        }

        /*.tree_contianer .nav-tree-item {*/
        /*padding-left: 0;*/
        /*}*/

        /*.tree_contianer .nav-tree-div {*/
        /*padding-left: 15px;*/
        /*}*/

        .zsa-nav {
            background: #FFF;
            overflow: hidden;
            height: 100%;
            padding-bottom: 75px;
            border-right: 1px solid #e6e6e6;
        }

        .zsa-nav form {
            height: 100%;
        }

        .zsa-nav .layui-this {
            background-color: #fff;
        }

        .zsa-nav .zsa-nav-title {
            color: #666;
            font-size: 20px;
            padding: 0 20px;
            border-bottom: 1px solid #e6e6e6;
        }

        .zsa-page-content {
            padding-left: 199px;
        }

        .zsa-page-content .layui-tab {
            margin: 0;
        }

        .zsa-page-content .layui-tab-title {
            height: 44px;
        }

        .zsa-page-content .layui-tab-title li {
            line-height: 48px;
        }

        .zsa-page-content .layui-tab-title .layui-this:after {
            height: 40px;
            top: 5px;
        }

        .zsa-page-content .x-so, .zsa-page-content xblock {
            text-align: left;
            margin-bottom: 5px;
        }

        .zsa-page-content xblock {
            margin-bottom: 0;
        }

        .zsa-page-content .zsa-btn {
            height: 36px;
            padding: 0 12px;
        }

        .layui-form-pane div[pane] {
            position: relative;
            border: 1px solid #e6e6e6;
        }
    </style>
</head>
<body class="childrenBody">
<ul class="layui-nav layui-nav-tree layui-nav-side zsa-nav">
    <li class="layui-nav-item zsa-nav-title">角色列表</li>
    <ul id="role-container" class="tree_contianer"></ul>
</ul>
<div class="zsa-page-content" height100>
    <div class="layui-tab" lay-filter="page-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">子角色列表</li>
            <li>角色详细</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div id="role-seach-container"></div>
                <table id="role-table" lay-filter="role-table"></table>
            </div>
            <div class="layui-tab-item">
                <form class="layui-form layui-form-pane" lay-filter="detailed-form">
                    <input type="hidden" class="zsa-hidden-id" name="id">
                    <input type="hidden" name="parentId">
                    <input type="hidden" name="type" value="101">
                    <div class="layui-row layui-col-space10 layui-form-item">
                        <div class="layui-col-md12">
                            <label class="layui-form-label">角色名</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" class="layui-input" lay-verify="required">
                            </div>
                        </div>
                        <!--<div class="layui-col-md6">-->
                        <!--<label class="layui-form-label">权限类型</label>-->
                        <!--<div class="layui-input-block">-->
                        <!--<select name="category" lay-verify="required" class="province">-->
                        <!--<option value="">请选择权限类型</option>-->
                        <!--<option value="1">请求</option>-->
                        <!--<option value="2">菜单</option>-->
                        <!--<option value="3">参数</option>-->
                        <!--</select>-->
                        <!--</div>-->
                        <!--</div>-->
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">序号</label>
                        <div class="layui-input-block">
                            <input type="number" name="sort" value="0" placeholder="请输入排序号" lay-verify="required|number"
                                   class="layui-input userPhone">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">角色代码</label>
                        <div class="layui-input-block">
                            <input type="text" disabled name="code" placeholder="角色代码（自动生成）"
                                   class="layui-input layui-disabled">
                        </div>
                    </div>
                    <div class="layui-row layui-col-space10 layui-form-item">
                        <div class="layui-col-md12">
                            <label class="layui-form-label">有效</label>
                            <div class="layui-input-block" pane>
                                <input type="checkbox" name="state" lay-skin="switch" lay-text="有效|无效">
                            </div>
                        </div>
                        <!--<div class="layui-col-md6">-->
                        <!--<label class="layui-form-label">是否拦截</label>-->
                        <!--<div class="layui-input-block" pane>-->
                        <!--<input type="checkbox" name="intercept" lay-skin="switch" lay-text="是|否">-->
                        <!--</div>-->
                        <!--</div>-->
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <textarea name="remark" placeholder="请输入备注内容" class="layui-textarea myself"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <!--<div class="layui-input-block">-->
                        <button class="layui-btn" lay-submit="" lay-filter="submit">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        <!--</div>-->
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="sys_toolbarDemo">
    <button class="layui-btn layui-btn-sm" lay-event="sys_toolbar_search">搜索</button>
    <button class="layui-btn layui-btn-sm" lay-event="sys_toolbar_refresh">
        <i class="layui-icon" style="line-height:30px">&#xe669;</i>
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="sys_toolbar_add">
        <i class="layui-icon" style="line-height:30px">&#xe654;</i>添加
    </button>
</script>

<script type="text/html" id="toolDemo">
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
</script>
<div th:replace="authority/common/currency/footer"></div>
<script>

    layui.extend({
        complexSearch: 'complexSearch/complexSearch' // {/}的意思即代表采用自有路径，即不跟随 base 路径
        , dtree: 'dtree/dtree'
    });
    layui.link(layui.cache.base + 'dtree/dtree.css?v=' + (layui.cache.version ? layui.cache.version : '1'));
    layui.link(layui.cache.base + 'dtree/font/dtreefont.css?v=' + (layui.cache.version ? layui.cache.version : '1'));
    layui.use(['lutil', 'form', 'element', 'table', 'complexSearch', 'dtree'], function () {
        var form = layui.form, dtree = layui.dtree, table = layui.table, element = layui.element
            , layer = layui.layer, lutil = layui.lutil, complexSearch = layui.complexSearch;
        var reg_lay_filter = /lay-filter="(.*?)"|lay-filter ="(.*?)"|lay-filter= "(.*?)"|lay-filter = "(.*?)"/,
            reg_zsa_val_format = /zsa-val-format="(.*?)"|zsa-val-format ="(.*?)"|zsa-val-format= "(.*?)"|zsa-val-format = "(.*?)"/;

        var search = complexSearch.render({
            container: "#role-seach-container",
            isDynamic: false,
            submit: false,
            returnFormat: {
                dataTypeName: 'type'
            },
            data: [
                {field: 'name', title: '角色名称', editType: 'text', dataType: 'string', formulas: ['<->']},
                {field: 'remark', title: '备注', editType: 'text', dataType: 'string', formulas: ['<->']},
                {
                    field: 'state',
                    title: '状态',
                    editType: 'select',
                    dataType: 'number',
                    formulas: ['='],
                    options: [{key: '--请选择--', value: ''}, {key: '有效', value: '1'}, {key: '无效', value: '0'}]
                },
            ],
            search: function (data) {
                var thisTable = layui.pageObtainTable('role-table');
                thisTable && thisTable.query({searchs: data.length > 0 ? JSON.stringify(data) : ''});
            }
        });

        var roleTree = dtree.render({
            elem: "#role-container",
            icon: "1",
            checkbar: true,
            skin: "layui",
            headers: {'[[${_csrf.headerName}]]': '[[${_csrf.token}]]'},
            url: content_path + 'authority/role/role_tree.do',
            dataStyle: "layuiStyle",
            response: {statusCode: 0, title: 'name'}
        });
        dtree.on("node('role-container')", function (res) {
            var param = res.param;
            var thisTable = layui.pageObtainTable('role-table');
            thisTable.query({id: param['nodeId']});
            updateForm(param['nodeId']);
            var tab = $('div.layui-tab[lay-filter=page-tab] ul li[lay-id=tab-add-0000]');
            if (tab.length) tab.find('i.layui-tab-close').click();
        });
        table.set({
            method: 'POST',
            defaultToolbar: [],
            cellMinWidth: '100',
            page: true,
            limit: 10,
            limits: [5, 10, 20, 30, 50],
            text: {
                none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
            },
            even: true,
            // skin: 'line',
            headers: {'[[${_csrf.headerName}]]': '[[${_csrf.token}]]'},
            request: {
                pageName: 'page' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            response: {
                // statusName: 'success' //数据状态的字段名称，默认：code 加上有问题
                statusCode: 0 //成功的状态码，默认：0
                , msgName: 'message' //状态信息的字段名称，默认：msg
                , countName: 'total' //数据总数的字段名称，默认：count
                , dataName: 'data' //数据列表的字段名称，默认：data
            }
        });
        var height = $(window).height() - $('#role-seach-container').outerHeight() - 85,
            height_value = parseInt(height) > 300 ? parseInt(height) : 300;
        layui.page_table_examples.push(table.render({
            elem: '#role-table',
            url: content_path + 'authority/role/list.do',
            height: height_value,
            toolbar: '#sys_toolbarDemo',
            title: '用户列表',
            cols: [
                [//标题栏
                    {type: 'checkbox', fixed: 'left'},
                    // {field: 'id', title: 'ID', fixed: 'left', width: 100},
                    {field: 'name', title: '角色名称', sort: true, fixed: 'left', width: 150},
                    {field: 'code', title: '代码', fixed: 'left', width: 150},
                    {field: 'sort', title: '排序', sort: true, width: 80},
                    {field: 'remark', title: '备注', minWidth: 250},
                    {field: 'modifiedUserName', title: '最后修改人', sort: true, width: 100},
                    {field: 'modifiedTime', title: '最后修改时间', sort: true, align: 'center', width: 150},
                    {
                        field: 'state', title: '状态', templet: function (d) {
                            return '<input type="checkbox" name="state" lay-filter="field_state" value="' + d.id + '" lay-skin="switch" zsa-val-format="[1,0]" lay-text="正常|失效"' + (d.state == 1 ? 'checked' : '') + '>';
                        }, sort: true, fixed: 'right', width: 90, align: 'center'
                    },
                    {field: 'cz', title: '操作', width: 90, toolbar: "#toolDemo", fixed: 'right', align: 'center'}
                ]
            ]
        }));

        //头工具栏事件
        table.on('toolbar(role-table)', function (obj) {
            var thisTable = layui.pageObtainTable('role-table');
            // var checks = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'sys_toolbar_refresh':
                    thisTable && thisTable.refresh();
                    break;
                case  'sys_toolbar_search':
                    search.submit();
                    break;
                case 'sys_toolbar_add':
                    var check = dtree.getNowParam(roleTree),
                        roleid = check && check['nodeId'] ? check['nodeId'] : '';
                    if (roleid == undefined || roleid == '') return lutil.error_alert('没有选择父节点'), false;
                    var tab = $('div.layui-tab[lay-filter=page-tab] ul li[lay-id=tab-add-0000]');
                    if (tab.length != 0) tab.find('input[type=hidden][name=parentId]').val(roleid), tab.click();
                    var add_from = $($('form[lay-filter=detailed-form]').prop('outerHTML'))
                        , id_input = add_from.find('input.zsa-hidden-id[type=hidden][name=id]');
                    add_from.attr('lay-filter', 'add-form');
                    // if (id_input.val() == undefined || id_input.val() == '') return lutil.error_alert('没有选择父节点'), false;
                    add_from.find('input[type=hidden][name=parentId]').val(roleid);
                    id_input.remove();
                    add_from[0].reset();
                    element.tabAdd('page-tab', {
                        title: '新增角色'
                        , content: add_from.prop('outerHTML') //支持传入html
                        , id: 'tab-add-0000'
                    });
                    tab = $('div.layui-tab[lay-filter=page-tab] ul li[lay-id=tab-add-0000]');
                    var close = $('<i class="layui-icon layui-unselect layui-tab-close">&#x1006;</i>');
                    tab.append(close);
                    close.click(function () {
                        element.tabDelete('page-tab', 'tab-add-0000');
                    });
                    form.render(null, 'add-form');
                    tab.click();
                    break;
            }
        });

        table.on('tool(role-table)', function (obj) {
            var data = obj.data; //获得当前行数据
            if (obj.event === 'del') {
                lutil.my_confirm("确定要删除“" + data['name'] + "”？？", function () {
                    var load = layer.load(2, {shade: [0.3, '#eee']});
                    ajaxRequestByCsrf(content_path + "authority/role/del.do", {id: data['id']}, function (res) {
                        var thisTable = layui.pageObtainTable('role-table');
                        dtree.reload(roleTree, {async: false}), dtree.dataInit(roleTree, data['parentId']), thisTable && thisTable.refresh();
                    }, null, function () {
                        layer.close(load);
                    })
                })
            }
        });

        form.on('submit(submit)', function (data) {
            var load = layer.load(2, {shade: [0.3, '#eee']});
            if (data.field['state']) data.field['state'] = data.field['state'] == 'on' ? 1 : 0; else data.field['state'] = 0;
            if (data.field['intercept']) data.field['intercept'] = data.field['intercept'] == 'on' ? 1 : 0; else data.field['intercept'] = 0;
            ajaxRequestByCsrf(content_path + "authority/role/add.do", data.field, function (res) {
                var thisTable = layui.pageObtainTable('role-table'),
                    tab = $('div.layui-tab[lay-filter=page-tab] ul li[lay-id=tab-add-0000]');
                if (data.field['id']) updateForm(data.field['id']);
                else dtree.reload(roleTree, {async: false}), dtree.dataInit(roleTree, data['parentId'])
                    , thisTable && thisTable.refresh(), tab.length && tab.find('i.layui-tab-close').click();
            }, null, function () {
                layer.close(load);
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        form.on('switch(field_state)', function (obj) {
            var thisTable = layui.pageObtainTable('role-table'),
                format = $(obj.elem).prop('outerHTML').match(reg_zsa_val_format), params = {id: obj.value};
            format = format ? JSON.parse(format[1]) : undefined;
            params[$(obj.elem).attr('name')] = format ? (format[obj.elem.checked ? 0 : 1]) : (obj.elem.checked);
            var loding = layer.load(2, {shade: [0.3, '#eee']});
            ajaxRequestByCsrf(content_path + 'authority/role/add.do', params, null, null, function () {
                var nodeData = dtree.getNowParam(roleTree);
                layer.close(loding), dtree.reload(roleTree, {async: false})
                    , dtree.dataInit(roleTree, nodeData['nodeId']), thisTable && thisTable.refresh();
            })
        });

        function updateForm(id) {
            var load = layer.load(2, {shade: [0.3, '#eee']});
            ajaxRequestByCsrf(content_path + "authority/role/detailed.do", {id: id}, function (res) {
                form.val("detailed-form", res.data);
            }, null, function () {
                layer.close(load);
            })
        }
    })

</script>
</body>
</html>